<template>
  <div class="modal-full-layout">
    <span class="header">
      <div class="header-left">
        <span
          style="font-size: 14px; cursor:pointer;"
          @click="
            () => {
              $emit('cancel');
            }
          "
        >
          <a-icon type="arrow-left" />
          <span class="text">返回</span>
        </span>
        <a-divider type="vertical" />
        <span class="title text">{{ title }}</span>
      </div>
      <div>
        <a-button
          type="primary"
          class="margin-right-sm"
          @click="
            () => {
              $emit('ok');
            }
          "
        >
          确定
        </a-button>
        <a-button
          @click="
            () => {
              $emit('cancel');
            }
          "
        >
          取消
        </a-button>
      </div>
    </span>
    <div class="main">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['uuid']" disabled type="hidden" />
          </a-form-item>
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['puuid']" disabled type="hidden" />
          </a-form-item>
          <a-card title="账号信息" :bordered="false" style="width: 100%">
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="姓名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input v-decorator="['name']" placeholder="请输入姓名" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="性别"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <TDictSelectTag
                    placeholder="请选择性别"
                    dictCode="sex"
                    v-decorator="['sex']"
                  ></TDictSelectTag>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="年龄"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input-number
                    v-decorator="['age']"
                    :min="1"
                    placeholder="请输入年龄"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="注册时间"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-date
                    v-decorator="['testDatetime']"
                    style="width: 100%;"
                    :trigger-change="true"
                    :showTime="true"
                    dateFormat="YYYY-MM-DD HH:mm:ss"
                    allowClear
                    placeholder="请选择注册时间"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="生日"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <t-date
                    v-decorator="['testDate']"
                    style="width: 100%;"
                    :trigger-change="true"
                    dateFormat="YYYY-MM-DD"
                    allowClear
                    placeholder="请选择生日"
                  />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="排序"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <TDictSelectTag
                    placeholder="请选择排序方式"
                    dictCode="sortFields"
                    v-decorator="['testCombobox']"
                  >
                  </TDictSelectTag>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="岗位"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input placeholder="请输入岗位" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="角色"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input placeholder="请输入角色" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="12">
                <a-form-item
                  label="电子邮箱"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input placeholder="请输入电子邮箱" style="width: 100%;" />
                </a-form-item>
              </a-col>
              <a-col span="12">
                <a-form-item
                  label="状态"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select placeholder="请选择状态">
                    <a-select-option :value="0">禁用</a-select-option>
                    <a-select-option :value="1">启用</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col span="24">
                <a-form-item
                  label="备注"
                  :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
                >
                  <a-textarea
                    placeholder="请输入备注"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                    v-decorator="[]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card title="个人资料" :bordered="false" style="width: 100%">
            <a-row>
              <a-row>
                <a-col>
                  <a-form-item
                    label="头像"
                    :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 22 } }"
                  >
                    <t-image-upload
                      ref="imageUpload"
                      :isMultiple="false"
                      :url="uploadUrl"
                      :data="{ bucket: 'yx-cloud-vue' }"
                      :limit="1"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col span="12">
                  <a-form-item
                    label="民族"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="[]" placeholder="请选择民族">
                      <a-select-option value="0">汉族</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item
                    label="籍贯"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="[]" placeholder="请输入籍贯"
                      >湖南
                    </a-input>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col span="12">
                  <a-form-item
                    label="入职时间"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-date-picker
                      style="width:100%;"
                      v-decorator="[]"
                      placeholder="请选择入职时间"
                    >
                    </a-date-picker>
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item
                    label="证件类型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="[]" placeholder="请选择证件类型">
                      <a-select-option value="0">身份证</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col span="12">
                  <a-form-item
                    label="证件号码"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      placeholder="请输入证件号码"
                      v-decorator="[
                        'cellphone',
                        {
                          rules: [
                            {
                              pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                              maxLength: 11,
                              message: '请输入正确的手机号码！',
                            },
                          ],
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item
                    label="文化程度"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select v-decorator="[]" placeholder="请选择文化程度">
                      <a-select-option value="0">本科</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col span="12">
                  <a-form-item
                    label="出生年月"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-date-picker
                      style="width:100%;"
                      v-decorator="[]"
                      placeholder="请选择出生年月"
                    >
                    </a-date-picker>
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item
                    label="办公电话"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="[]" placeholder="请输入办公电话" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col span="12">
                  <a-form-item
                    label="办公座机"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input v-decorator="[]" placeholder="请输入办公座机" />
                  </a-form-item>
                </a-col>
                <a-col span="12">
                  <a-form-item
                    label="手机号码"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-input
                      placeholder="请输入手机号码"
                      v-decorator="[
                        'cellphone',
                        {
                          rules: [
                            {
                              pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                              maxLength: 11,
                              message: '请输入正确的手机号码！',
                            },
                          ],
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-row>
          </a-card>
        </a-form>
      </a-spin>
    </div>
  </div>
</template>

<script>
import pick from "lodash.pick";
// 表单字段
const fields = [
  "uuid",
  "name",
  "sex",
  "age",
  "testDate",
  "testDatetime",
  "testCombobox",
  "puuid",
];
import TDictSelectTag from "@/components/TopVUI/dict/TDictSelectTag";
import { TImageUpload } from "@/components";

export default {
  props: {
    visible: {
      type: Boolean,
      // required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  components: {
    TDictSelectTag,
    TImageUpload,
  },
  data() {
    return {
      title: "",
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
      uploadUrl: "/document/minio/uploadfile",
    };
  },
  methods: {
    add(m, data) {
      console.log(m, data);
    },
    edit(m, data) {
      console.log(m, data);
    },
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    // 当 model 发生改变时，为表单设置值
    this.$watch("model", () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields));
      this.$refs.imageUpload.fileList = [];
    });
  },
};
</script>
<style scoped lang="less">
.modal-full-layout {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 999;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
    .header-left {
      display: flex;
      align-items: center;
      justify-content: center;
      .title {
        font-size: 16px;
      }
      .text {
        padding: 0 5px;
      }
    }
  }
  .main {
    flex: 1;
    overflow: scroll;
    padding: 10px;
  }
}
</style>
